<template>
  <div>
    <Table ref="table" :columns="columns" :fuc="page" :formState="formState" @reset="reset">
      <template #form>
        <FormItem label="备注" name="title">
          <Input v-model:value="formState.remark" allow-clear placeholder="备注" />
        </FormItem>
      </template>
      <template #toolBtn>
        <Button type="primary" @click="onAddBtn">添加</Button>
      </template>
      <template #operation="{ record }">
        <Space>
          <a @click="handleDel(record.id)">删除</a>
        </Space>
      </template>
      <template #format="{ record, column }">
        <template v-if="column.dataIndex === 'url' && record.url">
          <img class="img" :src="record.url" />
        </template>
      </template>
    </Table>

    <!-- 新增 -->
    <Drawer
      title="新增轮播图"
      placement="right"
      :visible="addVisible"
      @close="onAddClose"
      width="500"
    >
      <Add v-if="addVisible" @on-success="handleSuccess" />
    </Drawer>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue'
  import { page, del } from '/@/api/carousel'
  import { Table } from '/@/components/Table'
  import { FormItem, Input, Button, Drawer, Space, Modal } from 'ant-design-vue'
  import Add from './Add.vue'

  const table: any = ref(null)

  const columns = [
    {
      title: '备注',
      dataIndex: 'remark',
    },
    {
      title: '图片',
      dataIndex: 'url',
    },
    {
      title: '连接',
      dataIndex: 'link',
    },
    {
      title: '连接类型',
      dataIndex: 'linkType',
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
    },
    {
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',
    },
  ]

  const formState = ref({
    remark: '',
  })

  const reset = () => {
    formState.value = {
      remark: '',
    }
  }

  const addVisible = ref(false)
  const onAddBtn = () => {
    addVisible.value = true
  }
  const onAddClose = () => (addVisible.value = false)
  const handleSuccess = () => {
    onAddClose()
    table.value.handleQuery()
  }

  const handleDel = (id) => {
    // console.log(id)
    Modal.confirm({
      title: '你确认要删除吗？',
      onOk() {
        del(id).then(() => {
          table.value.handleQuery()
        })
      },
    })
  }
</script>

<style scoped>
  .img {
    width: 200px;
    height: 80px;
    /* border-radius: 50%; */
  }
</style>
